<template>
  <Dialog title="投诉记录" class="wide-popup" :visible="visible" :reveal="false" @close="handleClose">
    <!-- 回访记录 -->
    <el-row>
      <el-col style="border-bottom: 1px solid">
        <span class="margin-right">姓名： {{ currentRow.customerName }}</span>
        <span class="margin-right">性别： {{ currentRow.customerSex }}</span>
        <span class="margin-right">年龄： {{ currentRow.customerAge }}</span>
        <span class="margin-right">会员号： {{ currentRow.customerCode }}</span>
      </el-col>
      <el-col :span="12">投诉类型： {{ currentRow.complaintType }}</el-col>
      <el-col :span="12">关联项目： {{ currentRow.projectName }}</el-col>
      <el-col :span="12">投诉方式： {{ currentRow.complaintMode }}</el-col>
      <el-col :span="12">联系电话： {{ currentRow.customerPhone | phoneHandle }}</el-col>
      <el-col class="content-split"><span style="width: 60px">投诉内容：</span><span class="content-display">{{ currentRow.complaintContent }}</span></el-col>
      <el-col :span="12">接待客服： {{ currentRow.receptionCustomerServiceName }}</el-col>
      <el-col :span="12">接待时间： {{ currentRow.receptionTime }}</el-col>
      <el-col :span="12">工单截止日期： {{ currentRow.closingDate.split(" ")[0] }}</el-col>
      <el-col :span="12">状态： {{ currentRow.complaintStatus }}</el-col>
      <el-col class="content-split"><span style="width: 60px">处理方案：</span><span class="content-display">{{ currentRow.handlerProgramme }}</span></el-col>
      <el-col>
        <span class="margin-right">投诉编号： {{ currentRow.complaintNo }}</span>
        <span class="margin-right">接待客服： {{ currentRow.receptionCustomerServiceName }}</span>
        <span class="margin-right">接待时间： {{ currentRow.receptionTime }}</span>
        <span class="margin-right">处理人： {{ currentRow.handlerName }}</span>
        <span class="margin-right">处理时间： {{ currentRow.handlerTime }}</span>
      </el-col>
    </el-row>
    <div class="all-margin-bottom" />
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  filters: {
    phoneHandle(val) {
      if (!val) return '';
      let phone = "";
      phone = val.substring(0, 3) + "****" + val.substring(val.length - 4, val.length);
      return phone;
    },
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {},
    };
  },
  mounted() {
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>
<style lang="scss" scoped>
.pull-right{
  float: right;
}
.font-color{
  color:#FF6600;
}
.button-color{
  color:#0099FF;
  border-color:#0099FF;
}
.clear{
  clear: both;
}
  .el-col,.el-col-12{
    line-height: 40px;
  }
  .content-split{
    display: flex;
    .content-display{
      flex: 1;
    }
  }
  .margin-right{
    margin-right: 50px;
  }
</style>
